<style lang="scss">
.page-wrap{
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.page-container{
  flex:1;
  overflow-y: scroll;
}

.task-action{

}

.fun-tab-title{
  border-bottom: 1px solid $fun-border-color;
  color: #333;
  font-weight: 600;
}
.container{
  font-size: 28rpx;
  line-height: 1.6;
  padding: 20rpx;
  box-sizing: border-box;
}
.task-title{
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}
.task-price{
  font-size: 36rpx;
  font-weight: bold;
  color: $fun-red-color;
}
.head{
  padding: 20rpx;
}
.conclose{
  height: 320rpx;
  overflow: hidden;
}

.task-time{
  font-size: 24rpx;
  margin: 20rpx 0;
  padding: 8rpx 20rpx;
  color: #fff;
  border-radius: 10rpx;
  background: linear-gradient(to right, #E64340, rgba(255,120,0,.4));
}

.imgs{
  height: 200rpx;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 20rpx;
  .imgs-item{
    display: inline-block;
    height: 200rpx;
    margin-right: 20rpx;
  }
}

</style>
<template>
  <view class="page-wrap">

    <scroll-view scroll-y class="page-container">
      <div class="head bg-white">
        <div class="task-title">{{info.title}}</div>
        <div class="task-price">￥{{info.reward_pirce}}</div>
        <div class="p-t-10 p-b-10">
          <u-tag class="m-r-10" v-for="(tag,idx) in tags" :key="idx" size="mini" shape="circle" :text="tag.name" :type="tag.style"></u-tag>
        </div>
        <div class="task-time" v-if="timeReady">
          <block v-if="timeOjb.is_end">已结束</block>
          <block v-else-if="timeOjb.is_start && !timeOjb.is_end">{{ timeOjb.d }}天{{timeOjb.h}}时{{timeOjb.s}}秒后截止</block>
          <block v-else-if="!timeOjb.is_start && !timeOjb.is_end">{{ timeOjb.d }}天{{timeOjb.h}}时{{timeOjb.s}}秒后开始</block>
        </div>
      </div>

      <div class="h10"></div>
      <div class="fun-tab-title">提交任务</div>

      <div class="p-10">
        <u-form label-width="160" label-align="center" :model="upFormData" ref="uForm">
          <u-form-item label="联系电话"><u-input placeholder="请输入联系电话" v-model="upFormData.link" /></u-form-item>
          <u-form-item label="额外信息"><u-input placeholder="请输入额外信息" v-model="upFormData.remark" type="textarea" /></u-form-item>
          <u-form-item label="上传图片">
            <div class="up-form-item" v-if="upAction">
              <u-upload name="funupload"
                        width="140"
                        height="140"
                        upload-text="佐证图片"
                        :action="upAction"
                        :form-data="upFormData"
                        :file-list="fileList"
                        @on-remove="bindRemove"
                        @on-success="bindUpChange" ></u-upload>
            </div>
          </u-form-item>

        </u-form>
        <div class="h25"></div>
      </div>

    </scroll-view>
    <div class="task-action p-b-safe-area" v-if="timeOjb.is_start && !timeOjb.is_end">
      <u-button v-if="info.is_join" @click="submitTask" type="error" :ripple="true" :custom-style="btnCustomStyle" >我已完成,提交审核</u-button>
    </div>

  </view>
</template>

<script>
import { pageMixin } from '@/mixins'
import { info } from '@/api'
import { Exception } from '@/common/Exception'
import { getCountdownFunc, setNavigationBarTitle } from '@/common/helper'
import UParse from '@/uview-ui/components/u-parse/u-parse'
import store from '@/store'
import { task, joinTask, submitTask } from '@/api/task'
import UButton from '@/uview-ui/components/u-button/u-button'
import UTag from '@/uview-ui/components/u-tag/u-tag'
import { confirm, error, linkToEasy, modal, toHome } from '@/common/fun'
import UUpload from '@/uview-ui/components/u-upload/u-upload'
import { getAccessToken, getEnv } from '@/common/request'
import devConf from '@/common/env'
import UInput from '@/uview-ui/components/u-input/u-input'
import UForm from '@/uview-ui/components/u-form/u-form'
import UFormItem from '@/uview-ui/components/u-form-item/u-form-item'

var timeCtx = null

export default {
  components: { UFormItem, UForm, UInput, UUpload, UTag, UButton, UParse },
  mixins: [pageMixin],
  data () {
    return {
      upAction: '',
      upFormData: {
        imgs: '',
        link: '',
        remark: ''
      },
      upImgs: [],
      fileList: [],
      btnCustomStyle: {
        borderRadius: 0
      },
      timeReady: false,
      timeOjb: {
        d: '',
        h: '',
        m: '',
        s: '',
        is_start: false,
        is_end: false
      },
      tags: [],
      imgs: [],
      full: false,
      id: '',
      info: {
        is_join: false
      },
      unix_start_time: 0,
      unix_end_time: 0,
      content: ''
    }
  },
  methods: {
    bindRemove (index, lists, name) {
      this.upImgs.splice(index, 1)
    },
    bindUpChange (ret, index, lists, name) {
      // console.log(ret, index, lists, name)
      this.upImgs.push(ret.data)
    },
    beforeUpload (index, list) {
      return true
    },
    submitTask () {
      this.upFormData.imgs = this.upImgs.join('|')
      if (!this.upFormData.link) {
        error('联系方式必填')
        return
      }

      submitTask({ ...this.upFormData, task_id: this.id }, { tip: '数据提交中...' }).then(res => {
        confirm({
          title: '提示',
          content: '提交成功,审核通过即可获得奖励，请选择下一步操作',
          confirmText: '回到首页',
          cancelText: '查看任务'
        }).then(() => {
          toHome()
        }).catch(() => {
          linkToEasy('/pages/task/detail?id=' + this.id)
        })
      }).catch(err => {
        Exception.handle(err)
      })
    },
    previewImg (current) {
      uni.previewImage({
        urls: this.imgs,
        current
      })
    },
    bindTaggleFull () {
      this.full = !this.full
    },
    refreshTime () {
      this.timeOjb = getCountdownFunc({ start_timeStamp: this.unix_start_time, end_timeStamp: this.unix_end_time })
      // console.log(JSON.stringify(this.timeOjb))
      if (this.timeOjb.is_end) {
        clearInterval(timeCtx)
      }
    },
    async _init_func () {
      // const self = this
      // const id = this.$wxpage.options.id
      // const from_mid = self.$wxpage.options.from_mid ? self.$wxpage.options.from_mid : wx.setStorageSync('from_mid')
      //
      // if (from_mid && !wx.getStorageSync('from_mid')) {
      //   wx.setStorageSync('from_mid', from_mid)
      // }

      const article = await task({ id: this.id }).then(res => res.data).catch(err => Exception.handle(err))

      var tag_styles = ['primary', 'success', 'warning', 'error', 'info']

      if (article.tags) {
        this.tags = article.tags.split('|').map(item => {
          return { name: item, style: tag_styles[parseInt(Math.random() * 5)] }
        })
      }

      if (article.imgs) {
        this.imgs = article.imgs.split('|')
      }

      this.info = article

      this.unix_start_time = uni.$dayjs(this.info.start_time).unix()
      this.unix_end_time = uni.$dayjs(this.info.end_time).unix()

      this.refreshTime()
      this.timeReady = true
      timeCtx = setInterval(this.refreshTime, 1000)

      this.content = article.content
      setNavigationBarTitle(article.title)

      // self.config.navigationBarTitleText = ret.title;
    }
  },
  onShareAppMessage () {
    const userInfo = store.getters.getUserInfo(); let path = '/pages/task/detail?id=' + this.info.id

    // 加入分享标识
    if (userInfo && userInfo.id) {
      path = path + '&from_mid=' + userInfo.id
    }

    // console.log(userInfo,path)
    return {
      title: '#任务#' + this.info.title,
      path: path
    }
  },
  onUnload () {
    clearInterval(timeCtx)
  },
  onLoad (options) {
    this.id = options.id

    this.$set(this, 'upFormData', {
      access_token: getAccessToken(),
      env: getEnv(),
      channel: getEnv()
    })
    this.upAction = devConf.apiBaseHost + '/api/tool/upfile'
    this._init_func()
  }
}
</script>
